// 获取axios基地址
axios.defaults.baseURL = 'http://ajax-api.itheima.net'

const list = document.querySelector('.top');

const renderList = async () => {
    // 发起一级请求
    const {data: res} = await axios ({
        url: '/api/category/top',
        method: 'GET',
    })
    // console.log({data: res});

    // 发起二级请求
    const requestArr = res.data.map(item => {
        return axios ({
            url: '/api/category/sub?id=' + item.id,
            method: 'GET',
        })
    })
    // console.log(requestArr);

    const pua = await Promise.all(requestArr)
    // console.log(pua);

    // 渲染页面
    const html = pua
      .map(({data: item}) => {
        // console.log(item);

        return `
            <li>
              <a href="javascript:;">${item.data.name}</a>
              <img src="${item.data.picture}" alt="">
              <ul class="sub">
                ${item.data.children
                  .map((item) => {
                    return `
                      <li>
                        <a href="javascript:;">
                          <span>${item.name}</span>
                          <img src="${item.picture}" alt="">
                        </a>
                      </li> `
                })
                .join('')
              }
              </ul>
            </li> `
      })
      .join('')
      list.innerHTML = html
}
renderList()

